﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <asp:HiddenField ID="DiskFileUpload_GUID" runat="server" />
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Button" 
            onclick="Button1_Click"
            OnClientClick="uploadProgress();"
             />
        <br />
        <hr />
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <br />
       
        <table style="width:800px">
            <tr>
                <td id="barCell" style="width:0%; height:10px; background-color:Green;"></td>
                <td id="percentCell" style="width:100%"></td>
            </tr>
        </table>



<script type="text/javascript">
function uploadProgress() {
    var elemBar = document.getElementById("barCell");
    var elemPercent = document.getElementById("percentCell");
    var uploadid = document.getElementById("DiskFileUpload_GUID").value;

    alert(uploadid);
    var timerid = window.setInterval(
        function () {
            var xhr;
            if (window.ActiveXObject)
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            else
                xhr = new XMLHttpRequest();

            xhr.open("get", "progress.ashx?DiskFileUpload_GUID=" + uploadid, false);
            xhr.send(null);

            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var result = eval("(" + xhr.responseText + ")");
                    elemBar.style.width = result.percent + "%";
                    elemPercent.innerHTML = result.percent + "%"
                }
            }
        }
        , 1000
        );    
}
            
</script>

    </div>

    </form>
</body>
</html>
